<template>
  <div class="mine">
    <div class="myheader">
      <div class="headerLeft">
        <p>
          欢迎你！
          <span>{{ nickname }}</span>
        </p>
      </div>
      <div class="headerRight">
        <van-button type="default" size="mini" to="/login" v-if="isShow">登录</van-button>
        <van-button type="default" size="mini" to="/register" v-if="isShow">注册</van-button>
        <van-button type="default" @click="exit" size="mini"  v-if="!isShow">退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Mine',
  data () {
    return {
      nickname: this.getname(),
      isShow: this.id === '' ? true : this.isShow,
      fileList: []
    }
  },
  methods: {
    getname () {
      var nickname = '请登录'
      this.id = document.cookie
      let userInfo = localStorage.users
      if (userInfo) {
        userInfo = JSON.parse(userInfo)
        userInfo.map(item => {
          if (this.id === item.nickname) {
            nickname = item.nickname
            this.isShow = false
          }
        })
      }
      return nickname
    },
    exit () {
      document.cookie = ''
      this.nickname = '请登录'
      this.isShow = true
    }
  }
}
</script>

<style lang="scss">
.myheader {
  height: 40px;
  padding: 30px;
  background-color: rgb(147, 193, 253);
  .headerLeft {
    float: left;
    color: white;
  }
  .headerRight {
    float:right;
  }
}
</style>
